<template>
  <div class="setting-container">
    <!-- 语言 -->
    <div class="language">
      <div class="title">语言</div>
      <div class="options">
        <n-tag class="tag" :bordered="false" v-for="(item, index) in languageOptions" :key="index">
          {{ item }}
        </n-tag>
      </div>
    </div>

    <!-- 主题 -->
    <div class="theme">
      <div class="title">主题</div>
      <div class="options">
        <n-tag class="tag" :bordered="false" v-for="(item, index) in themeOptions" :key="index">
          {{ item }}
        </n-tag>
      </div>
    </div>

    <!-- 自动切换源 -->
    <div class="source">
      <div class="title">自动切换源</div>
      <n-checkbox :focusable="false" size="medium" label="是否自动切换播放源（仅在播放音乐失败后切换）" />
      <div class="text">从一下平台搜索可用源</div>
      <n-checkbox-group v-model:value="flatform">
        <n-checkbox
          class="checkbox"
          :focusable="false"
          size="medium"
          v-for="(item, index) in flatformCheckout"
          :key="index"
          :label="item"
          :value="item"
        />
      </n-checkbox-group>
    </div>

    <!-- 播放显示 -->
    <div class="palyDisplay">
      <div class="title">播放显示</div>
      <n-checkbox-group v-model:value="playDisplay">
        <n-checkbox
          class="checkbox-long"
          :focusable="false"
          size="medium"
          v-for="(item, index) in playDisplayCheckout"
          :key="index"
          :label="item"
          :value="item"
        />
      </n-checkbox-group>
    </div>

    <!-- 歌词显示 -->
    <div class="lyric">
      <div class="title">歌词显示</div>
      <n-checkbox-group v-model:value="lyric">
        <n-checkbox
          class="checkbox-long"
          :focusable="false"
          size="medium"
          v-for="(item, index) in lyricCheckout"
          :key="index"
          :label="item"
          :value="item"
        />
      </n-checkbox-group>
    </div>

    <!-- 备份歌单 -->
    <div class="source">
      <div class="title">备份歌单</div>
      <div class="text">重装插件或清除缓存数据会导致我的歌单数据丢失，强烈建议在这些操作前，备份我的歌单。</div>
      <n-button :focusable="false">导出歌单到本地</n-button>
    </div>

    <!-- 恢复备份 -->
    <div class="source">
      <div class="title">恢复歌单</div>
      <div class="text">选择备份文件，恢复我的歌单。注意：恢复我的歌单会覆盖现有的歌单。</div>
      <n-upload action="" :max="1">
        <n-button :focusable="false">从本地恢复歌单</n-button>
      </n-upload>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const languageOptions = ['简体中文', '繁体中文', 'English', 'French', 'Korean'];
const themeOptions = ['现代白', '现代黑', '简约白', '深空灰'];
const flatform = ref([]);
const flatformCheckout = ['网易云', 'QQ音乐', '酷狗音乐', '酷我音乐', '哔哩哔哩', '咪咕音乐', '千千音乐'];
const playDisplay = ref([]);
const playDisplayCheckout = ['显示专辑封面作为背景', '显示比特率', '显示音乐平台'];
const lyric = ref([]);
const lyricCheckout = ['启用桌面歌词', '外文歌词显示翻译（播放页）', '外文歌词显示翻译（桌面歌词）'];
</script>

<style scoped lang="scss">
@mixin flex-center {
  display: flex;
  align-items: center;
}

.setting-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-bottom: 250px;

  .title {
    @include flex-center;
    height: 60px;
    border-bottom: 1px solid #f2f2f7;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 27px;
  }

  .options {
    @include flex-center;
    height: 50px;

    .tag {
      margin-right: 20px;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #e5e5e5;
        transform: scale(1.3);
      }
    }
  }

  .text {
    margin: 20px 0;
    color: #5e5e5e;
  }

  .checkbox {
    width: 150px;
  }

  .checkbox-long {
    margin-right: 30px;
  }
}
</style>
